import React, {Component, PropTypes}  from 'react';
import {Link} from 'react-router';

import translate from '../../../i10n/translate';
import Icon from '../icon/Icon.react';
import Container from '../container/Container.react';

export class Logo extends Component {

    static propTypes = {
        logo: PropTypes.string.isRequired
    };

    static defaultProps = {
        logo: 'images/logo.png'
    };

    get style() {

        return {backgroundImage: 'url(' + this.props.logo + ')'}
    }

    get address() {

        return location.protocol + '//' + location.host;
    }

    render() {

        return <h1 className="site-header-logo">
            <Link to="/home" style={this.style} >
                <img src={this.props.logo} />
                {this.props.children}
            </Link>
        </h1>;
    }
}

export class MenuItem extends Component {

    static propTypes = {
        name: PropTypes.string.isRequired,
        url: PropTypes.string,
        open: PropTypes.bool
    };

    componentDidMount() {
        // TODO: reface this use react code style
        $(this.refs.item).on('click', function() {
            $(this)
            .children('a')
            .addClass('active')
            .parent()
            .siblings('li')
            .children('a')
            .removeClass('active');
        });
    }

    render () {
        const {name, url, open, percent} = this.props;

        if (open) {
            return <li className="nav-item" ref="item" style={{width: percent}}>
                <a href={url} target="_blank">{name}</a>
            </li>;
        }

        if(url){
            return <li className="nav-item" ref="item"  style={{width: percent}}>
                <Link to={url} className="nav-item">{name}</Link>
            </li>;
        }

        return <li className="nav-item" ref="item"  style={{width: percent}}>
            <Link className="nav-item">{name}
            </Link>
           /*<DiscoveryMenu />*/
        </li>;
    }
}

export  class DiscoveryItem extends  Component{

    render(){
        const {discoveryName,url} = this.props;
       return <li className="discovery-item" ref="item" >
            <Link to={url} className="discovery-item">{discoveryName}</Link>
        </li>
    }
}

export class DiscoveryMenu extends Component {
    static propTypes = {
        discoveryMenus: PropTypes.array
    };

    static defaultProps = {
        discoveryMenus: [{
            discoveryName: translate("discoveryMenu.roadBook"),
            url: "/roadbook/roadbookHome"
        },
            {
                discoveryName: translate("discoveryMenu.dynamics")
                //url: "/software"
            },
            {
                //name: translate("menu.shoping"),
                //url: "https://shop152619677.taobao.com",
                //open: true

                discoveryName: translate("discoveryMenu.live")
                //url: "/discovery"
            },
            {
                //name: translate("menu.shoping"),
                //url: "https://shop152619677.taobao.com",
                //open: true

                discoveryName: translate("discoveryMenu.Tribune")
                //url: "/discovery"
            }
        ]
    };


    get discoveryMenu() {

        return this.props.discoveryMenus.map((item, index) => {
            return <DiscoveryItem {...item}   key={index+1 } />;
        });
    }

    render(){
        return  <ul className="discoveryNav">
            {this.discoveryMenu}
        </ul>
    }

}

export class Menu extends Component {

    static propTypes = {
        menus: PropTypes.array
    };

    static defaultProps = {
        menus: [{
            name: translate("menu.hardware"),
            url: "/hardware"
        },
        {
            name: translate("menu.software"),
            url: "/software"
        },
        {
            name: translate("menu.shoping"),
            url: "https://shop152619677.taobao.com",
            open: true

            //name: translate("menu.discovery"),
            //url: "/roadbook/roadbookHome"

        }]

    };

    get menuItems () {
        let percent = (100 / this.props.menus.length) + '%';

        return this.props.menus.map((item, index) => {
            return <MenuItem {...item} percent={percent} key={index +1} />;
        });
    }

    render () {
        return <ul className="site-header-nav">
           {this.menuItems}
        </ul>;
    }
}

export class SignAction extends Component {

    static propTypes = {
        url: PropTypes.string.isRequired,
        text: PropTypes.string.isRequired
    };


    render () {
        return <Link to={this.props.url}>
            <Icon icon={this.props.icon}/>
            <span>{this.props.text}</span>
        </Link>
    }
}

export class Sign extends Component {

    static propTypes = {
        signin: PropTypes.object.isRequired,
        signup: PropTypes.object.isRequired
    };

    static defaultProps = {
        signin: {
            url: '/users/login',
            icon: 'user',
            text: translate('signin')
        },
        signup: {
            url: '/users/register',
            text: translate('signup')
        }
    };

    render() {

        return <div className="site-header-action">
            <SignAction {...this.props.signin} />
            <span className="split">|</span> 
            <SignAction {...this.props.signup} />
        </div>

    }
}



export default class Header extends Component {
    render() {
        return <div className="site-header"> 
            <Container>
                <Logo />
                <Menu />
            </Container>
        </div>;
    }
}